import SwitchDark from '../layout/components/SwitchDark';
import { UserOutlined, LockOutlined } from '@ant-design/icons';
import { encrypt, decrypt } from '@u/jsencrypt';
import { set, get, has } from '@u/cookie';
import { updateToken } from '@s';
import { TITLE } from '@/config';
import './index.less';

// 请求
import { authLogin } from '@a/public';
import { GetInfo, GenerateRoutes } from '@/hooks/useInfo.hooks';

export default function Login() {
	const navigate = useNavigate(),
		dispatch = useDispatch(),
		[form] = Form.useForm(),
		loginRules = {
			username: [
				{
					required: true,
					message: '账号不能为空'
				}
			],
			password: [
				{
					required: true,
					message: '密码不能为空'
				}
			]
		};

	// useRef获取组件
	const usernameRef = useRef(null),
		passwordRef = useRef(null);

	// 初始化form值
	const { username, password, rememberMe } = {
		username: has('username') ? get('username') : '',
		password: has('password') ? decrypt(get('password')) : ''
	};
	// 组件第一次渲染完成，此时dom节点已经生成，可以在这里调用ajax请求——————模拟 class 组件的 DidMount
	useMount(() => {
		// 设置form表的值
		form.setFieldsValue({
			username,
			password,
			rememberMe
		});
		// 自动获取光标
		if (username === '') {
			usernameRef.current.focus();
		} else if (password === '') {
			passwordRef.current.focus();
		}
	});

	// 登录逻辑
	const time = 30 * 24 * 60 * 60;
	function handleLogin(values) {
		// 记住账号/密码
		set('username', values.username, time);
		set('password', encrypt(values.password), time);
		set('rememberMe', values.rememberMe, time);

		// 登陆成功，路由跳转
		authLogin({ ...values, password: encrypt(values.password) }).then((res) => {
			msgSuccess('登录成功');
			dispatch(updateToken(res.data.tk));
			navigate('/');
			// 获取用户信息
			GetInfo();
			// 获取路由信息
			GenerateRoutes();
		});
	}
	const loginLeftImg = import.meta.glob('./images/**/*', { eager: true });
	function imgFn() {
		return loginLeftImg[`./images/login_left${Math.floor(Math.random() * 5)}.png`].default;
	}

	return (
		<div className="login-container">
			<SwitchDark isIcon={true} className="SwitchDark" />
			<div className="login-box">
				<div className="login-left">
					<img src={imgFn()} alt="login" />
				</div>
				<div className="login-form">
					<Card className="ant-card-hoverable">
						<Form onFinish={handleLogin} form={form} className="form box-border rounded-lg">
							<div className="f-s-24 font-bold mb-10">WELCOME TO BM</div>
							<div className="f-s-16 mb-20">请登录您的账号进入{TITLE}</div>
							<Form.Item name="username" rules={loginRules.username}>
								<Input ref={usernameRef} placeholder="请输入账号" prefix={<UserOutlined />} />
							</Form.Item>
							<Form.Item name="password" rules={loginRules.password}>
								<Input.Password ref={passwordRef} placeholder="请输入密码" prefix={<LockOutlined />} />
							</Form.Item>
							<Form.Item>
								<Button type="primary" htmlType="submit" className="w-full">
									登 录
								</Button>
							</Form.Item>
						</Form>
					</Card>
				</div>
			</div>
		</div>
	);
}
